<template>
  <!--面包屑导航-->
  <Breadcrumb>
    <template #firstTitle>
      <span>订单管理</span>
    </template>
    <template #secondTitle>
      <span>订单列表</span>
    </template>
  </Breadcrumb>

  <!--卡片视图-->
  <el-card>
    <!--搜索-->
    <el-row>
      <el-col :span="8">
        <el-input
          placeholder="请输入内容"
          clearable
          v-model="queryInfo.query"
          @clear="getListData"
        >
          <template #append>
            <el-button :icon="Search" @click="getListData"></el-button>
          </template>
        </el-input>
      </el-col>
    </el-row>
    <!--订单列表-->
    <el-table border stripe :data="orderList" v-loading="loading">
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="order_number" label="订单编号"></el-table-column>
      <el-table-column prop="order_price" label="订单价格"></el-table-column>
      <el-table-column prop="pay_status" label="是否付款">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.pay_status === '1'">已付款</el-tag>
          <el-tag type="danger" v-else>未付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="is_send" label="是否发货"></el-table-column>
      <el-table-column prop="create_time" label="下单时间">
        <template #default="scope">
          {{ $filters.dateFormat(scope.row.create_time) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template #default="scope">
          <!--修改订单-->
          <el-button
            v-if="scope.row.is_send === '否'"
            type="primary"
            size="small"
            @click="handleEditOrders(scope.row)"
          >修改订单</el-button>
          <!--修改地址-->
          <el-button
            type="primary"
            size="small"
            @click="handleEditAddress(scope.row)"
          >修改地址</el-button>
          <!--物流信息按钮-->
          <el-button
            v-if="scope.row.is_send === '是'"
            type="success"
            size="small"
            @click="handleShow(scope.row)"
          >物流信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
  </el-card>

  <editAddress v-model="addressVisible" />

  <showLogistics v-model="logisticsVisible" />

  <editOrders
    v-model="isEditVisible"
    v-model:ordersInfo="ordersInfo"
    @success="editSuccess"
  />

</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getOrders } from "@/api/orders.js"
import editAddress from "./editAddress.vue"
import showLogistics from "./showLogistics.vue"
import editOrders from "./editOrders.vue"

const orderList = ref([]); // 列表数据
const loading = ref(false);
// 获取用户列表的参数对象
const queryInfo = reactive({
  query: "",
  pagenum: 1, // 当前的页数
  pagesize: 10, // 当前每页显示多少条数据
});
const total = ref(0); // 总条数
const isEditVisible = ref(false);
const addressVisible = ref(false);
const logisticsVisible = ref(false);
const ordersInfo = ref({});

onMounted(() => {
  getListData();
});

// 查询列表
const getListData = async () => {
  loading.value = true;
  const data = await getOrders(queryInfo).finally(() => {
    loading.value = false;
  });

  orderList.value = data.goods;
  total.value = data.total;
};

// 监听pageSize改变
const handleSizeChange = (newSize) => {
  queryInfo.pagesize = newSize;
  getListData();
};

// 监听页码值的改变
const handleCurrentChange = (newPage) => {
  queryInfo.pagenum = newPage;
  getListData();
};

// 修改订单
const handleEditOrders = (row) => {
  isEditVisible.value = true
  ordersInfo.value = row
};

// 修改地址
const handleEditAddress = (row) => {
  addressVisible.value = true
};

// 物流信息
const handleShow = (id) => {
  logisticsVisible.value = true
};

const editSuccess = () => {
  isEditVisible.value = false
  getListData()
}

</script>

<style lang="scss" scoped></style>
